<template>
	<view class="towstage" @touchmove.stop.prevent="moveHandle">
		<scroll-view :class="['left',showHeader == false?'left_h5':'left_app']" :scroll-y="true" scroll-with-animation
			:scroll-top="scrollTop">
			<view v-for="(item, index) in classList" :key="index"
				:class="'classTitle ' + (current == index ? 'actives':'')" @tap="setCurrent(item, index)"
				:style="{color:current == index ?colors:''}">
				<text>{{item.name}}</text>
				<view class="classactive" v-if="current == index" :style="'background-color:' + colors">
				</view>
			</view>
		</scroll-view>
		<scroll-view :class="['right',showHeader == false?'right_h5':'right_app']" :scroll-y="true"
			:scroll-with-animation="true">
			<view :class="['screen',showHeader == false?'screen_h5':'screen_app']" v-if="hideShow == true">
				<view class="xiaoliang" @tap="setPrice">
					<text class="name">价格</text>
					<view class="icon">
						<text class="iconfont icon-shangsanjiao" :style="'color:' + (Price == '0' ? colors :'')"></text>
						<text class="iconfont icon-xiasanjiao" :style="'color:' + (Price == '1' ? colors :'')"></text>
					</view>
				</view>
				<view class="xiaoliang" @tap="setSales">
					<text class="name">销量</text>
					<view class="icon">
						<text class="iconfont icon-shangsanjiao" :style="'color:' + (sales == '0' ? colors :'')"></text>
						<text class="iconfont icon-xiasanjiao" :style="'color:' + (sales == '1' ? colors :'')"></text>
					</view>
				</view>
			</view>
			<view class="place" v-if="hideShow == true">
			</view>
			<view class="goods_list" v-if="dataList.length !== 0">
				<view v-for="(item, index) in dataList" :key="index" class="goods_item">
					<image :src="item.cover" @tap="jumpDetail(item)" :data-item="item"></image>
					<view class="goods_right">
						<view class="goods_name" @tap="jumpDetail(item)" :data-item="item">{{item.name}}</view>
						<view class="numbers">
							<text v-if="item.youhui == true">优惠券</text>
							<text v-if="item.baoyou == true">包邮</text>
						</view>
						<view class="price">
							<text class="money">￥{{item.price_selling }}</text>
							<text class="hx_money">￥{{item.price_market}}</text>
							<text class="iconfont icon-gouwuche gouwuche" @tap="addCart(item)"></text>
						</view>
					</view>
				</view>
				<view class="nodata">—— 到底啦 ——</view>
			</view>
			<view class="zanwu" v-if="dataList.length == 0">
				<text class="iconfont icon-none" style="font-size: 32upx"></text>
				<text style="font-size: 24upx">暂无商品</text>
			</view>
		</scroll-view>
		<!-- 弹出规格选项 -->
		<block v-if="skuif">
			<sku :goodlist="goodlist" :showModal="showModal" :colors="colors" @onhide="onhide()" :bottoms="bottoms">
			</sku>
		</block>
	</view>
</template>

<script>
	import sku from '../public/sku.vue'
	export default {
		data() {
			return {
				scrollTop: 0,
				goodlistif: false,
				Price: '',
				goodlist: [],
				skuif: false,
				dataList: [],
				//价格排序
				sales: '',
				//销量排序
				showModal: false,
				nowList: {},
			};
		},
		created() {
			let oneid = this.classList[0].id;
			this.setmydata(oneid)
		},
		components: {
			sku
		},
		props: {
			colors: {
				type: String
			},
			hideShow: {
				//控制是否显示筛选
				type: Boolean,
				default: true
			},
			classList: {
				type: Array
			},
			current: {
				type: Number,
				default: 0
			},
			showHeader: { //用来控制在APP下样式
				type: Boolean,
				default: false
			},
			bottoms: {
				type: String,
				default: '100'
			},
		},
		methods: {
			moveHandle() {},
			setmydata(cateid) {
				this.myrequest('data/api.goods/getGoods', {
					'cateids': ',' + cateid + ','
				}).then(res => {
					this.dataList = res.data.list
		
				})
			},
			setCurrent(item, index) {
				//设置tab
				let scrollTop = index * 20;
				if (index <= 2) {
					scrollTop = 0;
				}
				this.setData({
					current: index,
					scrollTop: scrollTop,
				});
				this.setmydata(item.id)
				this.$emit('setTwo', item)
			},

			setPrice() {
				//价格排序
				let price = this.Price;
				let data = this.dataList;
				/**
				 * 0 代表升序
				 * 1 代表降序
				 */		
				
				if (price == '') {
					this.setData({
						Price: '0',
						sales: ''
					});
					price='1';
				} 
				if (price == '0') {
					data.sort(function(a, b) {
						return a.price_selling - b.price_selling
					})
					this.setData({
						Price: '1'
					});
				} else if (price == '1') {
					data.sort(function(b, a) {
						return a.price_selling - b.price_selling
					})
					this.setData({
						Price: '0'
					});
				}
			},

			setSales() {
				//销量排序
				let sales = this.sales;
				let data = this.dataList;
				/**
				 * 0 代表升序
				 * 1 代表降序
				 */
				if (sales == '') {					
					this.setData({
						sales: '0',
						Price: ''
					});
					sales = '1';
				}  
				if (sales == '0') {
					data.sort(function(b, a) {
						return a.stock_sales - b.stock_sales
					})
				
					this.setData({
						sales: '1'
					});
				} else if (sales == '1') {
					data.sort(function(a, b) {
						return a.stock_sales - b.stock_sales
					})
					this.setData({
						sales: '0'
					});
				}
			},
			addCart(item) {
				this.goodlist = item
				this.skuif = true
	
				this.showModal = true
			},
			onhide(item) {
				//隐藏规格对话框
				this.showModal = false
			},
			jumpDetail(e) {
				uni.navigateTo({
					url: '/pages/views/goods/goodsDetails?code=' + e.code
				});
			}

		}
	};
</script>
<style scoped lang="scss">
	@import "./twostage.scss";
</style>
